<template>
  <div>
    <Menu></Menu>
    <div class="spall">
      <p class="fenl">
        <a href>所有分类</a>
        ·
        <a href>一级分类</a>
        ·
        <a href>二级分类</a>
      </p>
    </div>
    <div class="product">
      <div class="productL">
        <div class="swiper-container2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="main">
                <a class="bannerimg" href>
                  <img src="../assets/img/banner.png" />
                </a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="main">
                <a class="bannerimg" href>
                  <img src="../assets/img/banner.png" />
                </a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="main">
                <a class="bannerimg" href>
                  <img src="../assets/img/banner.png" />
                </a>
              </div>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination2"></div>
        </div>
      </div>
      <div class="productR">
        <p class="productname">商品名称</p>
        <p class="proline"></p>
        <p class="productmoney">
          <span class="newprice">$ 5.00</span>
          <span class="oldprice">$ 20.00</span>
          <span class="zhangfu">-75%</span>
        </p>
        <p class="proline"></p>

        <p class="productdes">商品描述商品描述商品描述商品描述商品描述商品描述商品描述XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="proline"></p>

        <p class="canshuname">
          <b>颜色</b>
        </p>
        <p class="canshu">
          <a class="active">红色</a>
          <a class>白色</a>
        </p>
        <p class="proline"></p>
        <p class="canshuname">
          <b>尺寸</b>
        </p>
        <p class="canshu">
          <a class="active">中号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
          <a class>大号</a>
        </p>
        <p class="proline"></p>
        <p class="canshuname">
          <b>数量</b>
        </p>
        <div>
          <div class="amount_box" style="margin: 0 auto;width: 100%">
            <a href="javascript:;" class="reduce reSty">-</a>
            <input type="text" value="1" class="sum" style="width: 93%" />
            <a href="javascript:;" class="plus">+</a>
          </div>
        </div>
        <div>
          <a class="buy">立即购买</a>
          <a class="addcar">加入购物车</a>
          <a class="maiwan">加入购物车</a>
        </div>
      </div>
      <div class="proimg">
        <p>产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案</p>
        <p>
          <img src="../assets/img/banner.png" />
        </p>
        <p>产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案产品文案</p>
        <p>
          <img src="../assets/img/banner.png" />
        </p>
      </div>
    </div>

    <div class="searchlist">
      <p class="cnxhtit">猜你喜欢</p>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src="../assets/img/banner.png" />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src="../assets/img/banner.png" />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src="../assets/img/banner.png" />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
      <a class="searchitem" href>
        <div class="goodsimg">
          <img src="../assets/img/banner.png" />
        </div>
        <p class="goodname">商品名称</p>
        <p class="goodprice">商品价格</p>
      </a>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import Menu from './Menu'
export default {
  components: {Menu},
  mounted () {
  this.initSwiper()    
  },
  methods: {
    initSwiper(){
      var mySwiper2 = new Swiper ('.swiper-container2', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination2',
        },
        autoplay:true,
        speed:1000,


    })

    }
  }
};

</script>

<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_productdetail.less);
}
    @media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_productdetail.less);
}
</style>